Next.js λ°°ν¬ μ΅μ μΈ Vercelμ μλ²λ¦¬μ€ νλ«νΌκ³Ό μ체 νΈμ€ν μ μμΈνκ² λΉκ΅ν©λλ€. κ° λ°©μμ μ₯λ¨μ , λΉμ©, μ΅μ μ¬μ© μ¬λ‘λ₯Ό λΆμνμ¬ μ 보μ μ κ°ν κ²°μ μ λ΄λ¦΄ μ μλλ‘ λμ΅λλ€.
Next.js λ°°ν¬: Vercel λ μ체 νΈμ€ν - μ’ ν© κ°μ΄λ
Next.jsλ μλ² μ¬μ΄λ λ λλ§(SSR), μ μ μ¬μ΄νΈ μμ±(SSG), API λΌμ°νΈμ κ°μ κΈ°λ₯μ μ 곡νλ©° νλμ μΈ μΉ μ ν리μΌμ΄μ ꡬμΆμ μν μ§λ°°μ μΈ νλ μμν¬κ° λμμ΅λλ€. νμ§λ§ Next.js μ ν리μΌμ΄μ μ ν¨κ³Όμ μΌλ‘ λ°°ν¬νλ κ²μ μ±λ₯, νμ₯μ±, λΉμ© ν¨μ¨μ±μ 보μ₯νλ λ° λ§€μ° μ€μν©λλ€. μ΄ κ°μ΄λμμλ λ κ°μ§ μ£Όμ λ°°ν¬ λ°©μ, μ¦ Next.js μ ν리μΌμ΄μ μ μν΄ νΉλ³ν μ€κ³λ νλ«νΌμΈ Vercelκ³Ό μ§μ μΈνλΌλ₯Ό κ΄λ¦¬νλ μ체 νΈμ€ν μ μμΈνκ² λΉκ΅ν©λλ€. κ° μ΅μ μ μ₯μ , λ¨μ , λΉμ© λ° μ΅μ μ μ¬μ© μ¬λ‘λ₯Ό κ²ν νμ¬ νλ‘μ νΈμ λ§λ μ 보μ μ κ°ν κ²°μ μ λ΄λ¦΄ μ μλλ‘ λκ² μ΅λλ€.
λ°°ν¬ νκ²½ μ΄ν΄νκΈ°
μΈλΆ μ¬νμ μ΄ν΄λ³΄κΈ° μ μ, κ΄λ ¨λ κΈ°μ κ³Ό κ°λ μ λν κΈ°λ³Έμ μΈ μ΄ν΄λ₯Ό λ€μ Έλ³΄κ² μ΅λλ€.
Next.jsλ 무μμΈκ°?
Next.jsλ νλ‘λμ μμ€μ μΉ μ ν리μΌμ΄μ μ ꡬμΆνκΈ° μν React νλ μμν¬μ λλ€. λ€μκ³Ό κ°μ κΈ°λ₯μ μ 곡ν©λλ€:
- μλ² μ¬μ΄λ λ λλ§(SSR): μλ²μμ React μ»΄ν¬λνΈλ₯Ό λ λλ§νμ¬ SEOμ μ΄κΈ° λ‘λ© μκ°μ κ°μ ν©λλ€.
- μ μ μ¬μ΄νΈ μμ±(SSG): λΉλ μμ μ HTML νμ΄μ§λ₯Ό μμ±νμ¬ λ§€μ° λΉ λ₯Έ μ±λ₯μ μ 곡ν©λλ€.
- API λΌμ°νΈ: Next.js μ ν리μΌμ΄μ μ μΌλΆλ‘ μλ²λ¦¬μ€ ν¨μλ₯Ό μμ±ν μ μμ΅λλ€.
- μ΄λ―Έμ§ μ΅μ ν: λ΄μ₯λ μ΄λ―Έμ§ μ΅μ ν κΈ°λ₯μ μ 곡ν©λλ€.
- λΌμ°ν : κ°λ¨νκ³ μ§κ΄μ μΈ νμΌ μμ€ν κΈ°λ° λΌμ°ν μμ€ν μ μ 곡ν©λλ€.
- TypeScript μ§μ: νμ μμ μ±κ³Ό ν₯μλ κ°λ°μ κ²½νμ μν΄ λ°μ΄λ TypeScript μ§μμ μ 곡ν©λλ€.
Vercelμ΄λ 무μμΈκ°?
Vercelμ νλ‘ νΈμλ μΉ μ ν리μΌμ΄μ , νΉν Next.jsλ‘ κ΅¬μΆλ μ ν리μΌμ΄μ μ λ°°ν¬νκ³ νΈμ€ν νκΈ° μν΄ νΉλ³ν μ€κ³λ μλ²λ¦¬μ€ νλ«νΌμ λλ€. λ€μκ³Ό κ°μ κΈ°λ₯μ μ 곡ν©λλ€:
- μλ λ°°ν¬: Git 리ν¬μ§ν 리μ μννκ² ν΅ν©λμ΄ λ³κ²½ μ¬νμ μλμΌλ‘ λ°°ν¬ν©λλ€.
- κΈλ‘λ² CDN: μ μΈκ³ μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN)μ μ ν리μΌμ΄μ μ λ°°ν¬νμ¬ μ μΈκ³μ μΌλ‘ λ λΉ λ₯Έ λ‘λ© μκ°μ μ 곡ν©λλ€.
- μλ²λ¦¬μ€ ν¨μ: μλ²λ¦¬μ€ ν¨μλ₯Ό λ°°ν¬νμ¬ API μμ² λ° λμ μ½ν μΈ λ₯Ό μ²λ¦¬ν μ μμ΅λλ€.
- 미리보기 λ°°ν¬: κ° ν 리νμ€νΈμ λν΄ κ³ μ ν URLμ μμ±νμ¬ λ³κ²½ μ¬νμ λ©μΈ λΈλμΉμ λ³ν©νκΈ° μ μ 미리 λ³Ό μ μμ΅λλ€.
- μλ νμ₯: νΈλν½ μμμ λ°λΌ μ ν리μΌμ΄μ μ μλμΌλ‘ νμ₯ν©λλ€.
μ체 νΈμ€ν μ΄λ 무μμΈκ°?
μ체 νΈμ€ν μ μ§μ κ΄λ¦¬νλ μΈνλΌμ Next.js μ ν리μΌμ΄μ μ λ°°ν¬νλ κ²μ μλ―Έν©λλ€. μ΄λ AWS, Google Cloud, Azureμ κ°μ ν΄λΌμ°λ μ 곡μ 체λ μ체 물리μ μλ²μμ μ΄λ£¨μ΄μ§ μ μμ΅λλ€. μ체 νΈμ€ν μ λ°°ν¬ νκ²½μ λν λ ν° μ μ΄κΆμ μ 곡νμ§λ§, λ λ§μ κΈ°μ μ λ¬Έ μ§μκ³Ό μ μ§ κ΄λ¦¬ λ Έλ ₯μ΄ νμν©λλ€.
Vercel: μλ²λ¦¬μ€μ μ΄μ
Vercelμ μ₯μ
- μ¬μ© νΈμμ±: Vercelμ κ°μνλ λ°°ν¬ νλ‘μΈμ€λ₯Ό μ 곡νμ¬ Next.js μ ν리μΌμ΄μ μ λ§€μ° μ½κ² λ°°ν¬ν μ μμ΅λλ€. Git 리ν¬μ§ν 리λ₯Ό μ°κ²°νκ³ λ°°ν¬ μ€μ μ ꡬμ±νλ κ²μ μΌλ°μ μΌλ‘ κ°λ¨ν κ³Όμ μ λλ€.
- μλ λ°°ν¬: Git 리ν¬μ§ν 리μ λ³κ²½ μ¬νμ νΈμν λλ§λ€ Vercelμ μ ν리μΌμ΄μ μ μλμΌλ‘ λΉλνκ³ λ°°ν¬ν©λλ€. μ΄λ‘ μΈν΄ μλ λ°°ν¬ λ¨κ³κ° νμ μμΌλ©° μ ν리μΌμ΄μ μ΄ νμ μ΅μ μνλ‘ μ μ§λ©λλ€.
- κΈλ‘λ² CDN: Vercelμ κΈλ‘λ² CDNμ μ μΈκ³ μ¬μ©μμκ² μ ν리μΌμ΄μ μ΄ λΉ λ₯΄κ² μ λ¬λλλ‘ λ³΄μ₯ν©λλ€. μ΄λ νΉν μλ²μ μ§λ¦¬μ μΌλ‘ λ©λ¦¬ λ¨μ΄μ§ μ¬μ©μμκ² μ±λ₯μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€. μλ₯Ό λ€μ΄, λμΏμ μλ μ¬μ©μκ° λ΄μμ μλ μλ²μ μ μν λ CDNμ ν΅ν΄ μ ν리μΌμ΄μ μ΄ μ 곡λλ©΄ λ‘λ© μκ°μ΄ ν¨μ¬ λΉ¨λΌμ§λλ€.
- μλ²λ¦¬μ€ ν¨μ: Vercelμ μλ²λ¦¬μ€ ν¨μλ₯Ό μ¬μ©νλ©΄ μλ² κ΄λ¦¬ μμ΄ λ°±μλ μ½λλ₯Ό μ€νν μ μμ΅λλ€. μ΄λ API μμ² λ° λμ μ½ν μΈ λ₯Ό μ²λ¦¬νλ λ° λΉμ© ν¨μ¨μ μΈ μ루μ μ΄ λ μ μμ΅λλ€. μμ λ―Έλμ΄ μ ν리μΌμ΄μ μ μλ‘ λ€λ©΄, Vercelμ μλ²λ¦¬μ€ ν¨μλ μ μ© μλ² μμ΄λ μ¬μ©μ μΈμ¦, μ λ°μ΄νΈ κ²μ, λ°μ΄ν° κ°μ Έμ€κΈ°μ κ°μ μμ μ μ²λ¦¬ν μ μμ΅λλ€.
- 미리보기 λ°°ν¬: Vercelμ 미리보기 λ°°ν¬ κΈ°λ₯μ μ¬μ©νλ©΄ λ³κ²½ μ¬νμ λ©μΈ λΈλμΉμ λ³ν©νκΈ° μ μ νλ‘λμ κ³Ό μ μ¬ν νκ²½μμ ν μ€νΈν μ μμ΅λλ€. μ΄λ λ²κ·Έκ° νλ‘λμ μ λλ¬νλ κ²μ λ°©μ§νκ³ λ μνν μ¬μ©μ κ²½νμ 보μ₯νλ λ° λμμ΄ λ©λλ€. μλ‘μ΄ μ μμκ±°λ κΈ°λ₯μ κ°λ°νλ νμ 미리보기 λ°°ν¬λ₯Ό μ¬μ©νμ¬ κ²°μ νλ‘μΈμ€λ₯Ό ν μ€νΈνκ³ κΈ°λ₯μ΄ λμ€μκ² κ³΅κ°λκΈ° μ μ λͺ¨λ ν΅ν©μ΄ μ¬λ°λ₯΄κ² μλνλμ§ νμΈν μ μμ΅λλ€.
- μλ νμ₯: Vercelμ νΈλν½ μμμ λ°λΌ μ ν리μΌμ΄μ μ μλμΌλ‘ νμ₯νμ¬ μμμΉ λͺ»ν νΈλν½ κΈμ¦μ μ²λ¦¬ν μ μλλ‘ λ³΄μ₯ν©λλ€. μ΄λ‘ μΈν΄ μλ νμ₯μ΄ νμ μμΌλ©° νΌν¬ μκ°λμλ μ ν리μΌμ΄μ μ κ°μ©μ±μ΄ μ μ§λ©λλ€.
Vercelμ λ¨μ
- λ²€λ μ’ μμ±: Vercelμ λ μ μ μΈ νλ«νΌμΌλ‘, κ·Έλ€μ μΈνλΌμ μλΉμ€μ λ¬Άμ΄κ² λ¨μ μλ―Έν©λλ€. μ ν리μΌμ΄μ μ λ€λ₯Έ νλ«νΌμΌλ‘ μ΄μ νλ κ²μ μ΄λ €μΈ μ μμ΅λλ€.
- κ°κ²©: Vercelμ κ°κ²©μ νΈλν½μ΄ λ§μ μ ν리μΌμ΄μ μ κ²½μ° λΉμ μ μμ΅λλ€. μλ²λ¦¬μ€ ν¨μμ λ°μ΄ν° μ μ‘ λΉμ©μ΄ λΉ λ₯΄κ² μ¦κ°ν μ μμ΅λλ€.
- μ νλ μ μ΄: Vercelμ κ΄λ¦¬ν νκ²½μ μ 곡νλ―λ‘ κΈ°λ³Έ μΈνλΌμ λν μ μ΄κ° μ νλ©λλ€. μ΄λ λ°°ν¬ νκ²½μ λν νΉμ μꡬ μ¬νμ΄ μλ κ²½μ° λ¨μ μ΄ λ μ μμ΅λλ€.
- λλ²κΉ μ μ΄λ €μ: Vercelμμ μλ²λ¦¬μ€ ν¨μλ₯Ό λλ²κΉ νλ κ²μ κΈ°μ‘΄ μ ν리μΌμ΄μ μ λλ²κΉ νλ κ²λ³΄λ€ λ μ΄λ €μΈ μ μμ΅λλ€. λ‘κ·Έ λ° λλ²κΉ λκ΅¬κ° λ μ§κ΄μ μΌ μ μμ΅λλ€.
- μ½λ μ€ννΈ: μλ²λ¦¬μ€ ν¨μλ μ½λ μ€ννΈλ₯Ό κ²½νν μ μμΌλ©°, μ΄λ‘ μΈν΄ 첫 μμ²μ λν μλ΅ μκ°μ΄ λλ €μ§ μ μμ΅λλ€. μ΄λ ν¨μκ° μμ²μ μ²λ¦¬νκΈ° μ μ μ΄κΈ°νλμ΄μΌ νκΈ° λλ¬Έμ λλ€. Vercelμ΄ μ½λ μ€ννΈ μκ°μ μ΅μννκΈ° μν΄ λ§μ λ Έλ ₯μ κΈ°μΈμμ§λ§, μ¬μ ν κ³ λ €ν΄μΌ ν μμμ λλ€.
Vercel κ°κ²© μ μ±
Vercelμ μ·¨λ―Έμ© νλ‘μ νΈλ₯Ό μν λ¬΄λ£ νλκ³Ό νλ‘λμ μ ν리μΌμ΄μ μ μν μ λ£ νλμ μ 곡ν©λλ€. κ°κ²©μ λ€μκ³Ό κ°μ μμλ₯Ό κΈ°λ°μΌλ‘ μ± μ λ©λλ€:
- λΉλ μκ°: μ ν리μΌμ΄μ μ λΉλνλ λ° κ±Έλ¦¬λ μκ°μ λλ€.
- μλ²λ¦¬μ€ ν¨μ μ€ν νμ: μλ²λ¦¬μ€ ν¨μκ° μ€νλλ νμμ λλ€.
- λ°μ΄ν° μ μ‘λ: μ ν리μΌμ΄μ κ³Ό μ¬μ©μ κ°μ μ μ‘λλ λ°μ΄ν°μ μμ λλ€.
Vercel νλμ μ νν λλ μ ν리μΌμ΄μ μ 리μμ€ μꡬ μ¬νμ μ μ€νκ² κ³ λ €νλ κ²μ΄ μ€μν©λλ€. μλ₯Ό λ€μ΄, μ΄λ―Έμ§ μ λ‘λ λ° λ€μ΄λ‘λ μμ΄ λ§μ μΉμ¬μ΄νΈλ λ λμ λ°μ΄ν° μ μ‘ λΉμ©μ΄ λ°μν κ°λ₯μ±μ΄ λμ΅λλ€.
μ체 νΈμ€ν : DIY λ°©μ
μ체 νΈμ€ν μ μ₯μ
- μλ²½ν μ μ΄: μ체 νΈμ€ν μ λ°°ν¬ νκ²½μ λν μλ²½ν μ μ΄κΆμ μ 곡ν©λλ€. νΉμ μꡬ μ¬νμ λ§κ² μΈνλΌλ₯Ό μ¬μ©μ μ μν μ μμ΅λλ€.
- λΉμ© μ κ°: μ체 νΈμ€ν μ νΈλν½μ΄ λ§μ μ ν리μΌμ΄μ μ κ²½μ° Vercelλ³΄λ€ λΉμ© ν¨μ¨μ μΌ μ μμΌλ©°, νΉν μΈνλΌμ 리μμ€ νμ©μ μ΅μ νν μ μλ κ²½μ° λμ± κ·Έλ μ΅λλ€.
- μ μ°μ±: μ체 νΈμ€ν μ μ¬μ©νλ©΄ μμ λ§μ κΈ°μ μ€νκ³Ό λꡬλ₯Ό μ νν μ μμ΅λλ€. νΉμ νλ«νΌμμ μ 곡νλ μλΉμ€μ μ νλμ§ μμ΅λλ€.
- λ²€λ μ’ μμ± μμ: μ체 νΈμ€ν μ λ²€λ μ’ μμ±μ μ κ±°νμ¬ μΈμ λ μ§ λ€λ₯Έ μΈνλΌ μ 곡μ μ²΄λ‘ μ ν리μΌμ΄μ μ μ΄μ ν μ μλ μμ λ₯Ό μ€λλ€.
- μ¬μ©μ μ μ: μλ² νκ²½μ λͺ¨λ μΈ‘λ©΄μ μ νν νμμ λ§κ² μ‘°μ ν μ μμ΅λλ€. μ΄λ νΉμ κ·μ μ€μ λλ 보μ μꡬ μ¬νμ΄ μλ μ‘°μ§μ νΉν μ μ©ν μ μμ΅λλ€.
μ체 νΈμ€ν μ λ¨μ
- 볡μ‘μ±: μ체 νΈμ€ν μ Vercelκ³Ό κ°μ νλ«νΌμ μ¬μ©νλ κ²λ³΄λ€ λ 볡μ‘ν©λλ€. μλ² κ΄λ¦¬, λ€νΈμνΉ λ° λ³΄μμ λν μ λ¬Έ μ§μμ΄ νμν©λλ€.
- μ μ§ κ΄λ¦¬: μ체 νΈμ€ν μ μ§μμ μΈ μ μ§ κ΄λ¦¬ λ° λͺ¨λν°λ§μ΄ νμν©λλ€. μλ²κ° μ΅μ μνμ΄κ³ , μμ νλ©°, μ΅μ μΌλ‘ μλνλμ§ νμΈν΄μΌ ν©λλ€.
- νμ₯μ±μ μ΄λ €μ: μ체 νΈμ€ν μΌλ‘ μ ν리μΌμ΄μ μ νμ₯νλ κ²μ λ μ΄λ €μΈ μ μμ΅λλ€. νΈλν½μ΄ μ¦κ°ν¨μ λ°λΌ μλμΌλ‘ μΆκ° 리μμ€λ₯Ό νλ‘λΉμ λνκ³ κ΅¬μ±ν΄μΌ ν©λλ€.
- 보μ μν: μ체 νΈμ€ν μ λ ν° λ³΄μ μνμ λ ΈμΆλ©λλ€. 곡격μΌλ‘λΆν° μ ν리μΌμ΄μ μ 보νΈνκΈ° μν΄ κ°λ ₯ν 보μ μ‘°μΉλ₯Ό ꡬνν΄μΌ ν©λλ€.
- μκ° ν¬μ: μ체 μΈνλΌλ₯Ό μ€μ νκ³ κ΄λ¦¬νλ λ°λ μλΉν μκ° ν¬μκ° νμν©λλ€. μ΄λ‘ μΈν΄ μ ν리μΌμ΄μ κ°λ°μ λν μ§μ€μ΄ μ νλ μ μμ΅λλ€.
μ체 νΈμ€ν μ΅μ
Next.js μ ν리μΌμ΄μ μ μ체 νΈμ€ν νλ λ°λ μ¬λ¬ κ°μ§ μ΅μ μ΄ μμ΅λλ€:
- ν΄λΌμ°λ μ 곡μ 체 (AWS, Google Cloud, Azure): ν΄λΌμ°λ μ 곡μ 체λ μ ν리μΌμ΄μ λ°°ν¬ λ° κ΄λ¦¬λ₯Ό μν λ€μν μλΉμ€λ₯Ό μ 곡ν©λλ€. EC2(AWS), Compute Engine(Google Cloud) λλ Virtual Machines(Azure)μ κ°μ μλΉμ€λ₯Ό μ¬μ©νμ¬ Next.js μ ν리μΌμ΄μ μ νΈμ€ν ν μ μμ΅λλ€.
- κ°μ μ¬μ€ μλ²(VPS): VPS μ 곡μ 체λ μ ν리μΌμ΄μ μ νΈμ€ν νλ λ° μ¬μ©ν μ μλ κ°μ μλ²λ₯Ό μ 곡ν©λλ€. μλ‘λ DigitalOcean, Linode, Vultrκ° μμ΅λλ€.
- λ컀 컨ν μ΄λ: λ컀 컨ν μ΄λλ₯Ό μ¬μ©νλ©΄ μ ν리μΌμ΄μ κ³Ό κ·Έ μ’ μμ±μ λ¨μΌ λ¨μλ‘ ν¨ν€μ§ν μ μμ΅λλ€. κ·Έλ° λ€μ λ컀λ₯Ό μ§μνλ λͺ¨λ νκ²½μ 컨ν μ΄λλ₯Ό λ°°ν¬ν μ μμ΅λλ€.
- λ² μ΄λ©ν μλ²: μ΅λμ μ±λ₯κ³Ό μ μ΄κ° νμν μ ν리μΌμ΄μ μ κ²½μ°, μ μ© νλμ¨μ΄ 리μμ€λ₯Ό μ 곡νλ λ² μ΄λ©ν μλ²μμ Next.js μ±μ νΈμ€ν ν μ μμ΅λλ€.
μμ: Dockerλ₯Ό μ¬μ©νμ¬ AWS EC2μ Next.js λ°°ν¬νκΈ°
λ€μμ Dockerλ₯Ό μ¬μ©νμ¬ AWS EC2μ Next.js μ ν리μΌμ΄μ μ λ°°ν¬νλ κ°λ¨ν μμμ λλ€:
- Dockerfile μμ±:
FROM node:16-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build EXPOSE 3000 CMD ["npm", "start"] - λ컀 μ΄λ―Έμ§ λΉλ:
docker build -t my-nextjs-app . - μ΄λ―Έμ§λ₯Ό 컨ν μ΄λ λ μ§μ€νΈλ¦¬(μ: Docker Hub λλ AWS ECR)μ νΈμν©λλ€.
- AWSμμ EC2 μΈμ€ν΄μ€λ₯Ό μμν©λλ€.
- EC2 μΈμ€ν΄μ€μ λ컀λ₯Ό μ€μΉν©λλ€.
- 컨ν μ΄λ λ μ§μ€νΈλ¦¬μμ λ컀 μ΄λ―Έμ§λ₯Ό κ°μ Έμ΅λλ€.
- λ컀 컨ν
μ΄λ μ€ν:
docker run -p 3000:3000 my-nextjs-app - 리λ²μ€ νλ‘μ(μ: Nginx λλ Apache)λ₯Ό ꡬμ±νμ¬ νΈλν½μ λ컀 컨ν μ΄λλ‘ λΌμ°ν ν©λλ€.
μ΄κ²μ κΈ°λ³Έμ μΈ μμμ΄λ©°, νλ‘λμ λ°°ν¬μλ λ‘λ λ°Έλ°μ±, λͺ¨λν°λ§, 보μ κ°νμ κ°μ μΆκ°μ μΈ κ³ λ € μ¬νμ΄ νμν©λλ€.
λΉμ© λΉκ΅
Next.js μ ν리μΌμ΄μ λ°°ν¬ λΉμ©μ νΈλν½ μ, 리μμ€ μ¬μ©λ, μ νν λ°°ν¬ μ΅μ λ± μ¬λ¬ μμΈμ λ°λΌ λ¬λΌμ§λλ€.
Vercel λΉμ© μμΈ
- λΉλ μκ°: Vercelμ μ ν리μΌμ΄μ λΉλ μκ°μ λν΄ μκΈμ λΆκ³Όν©λλ€.
- μλ²λ¦¬μ€ ν¨μ νΈμΆ: Vercelμ μλ²λ¦¬μ€ ν¨μκ° μ€νλ λλ§λ€ μκΈμ λΆκ³Όν©λλ€.
- λ°μ΄ν° μ μ‘λ: Vercelμ μ ν리μΌμ΄μ κ³Ό μ¬μ©μ κ°μ μ μ‘λλ λ°μ΄ν° μμ λν΄ μκΈμ λΆκ³Όν©λλ€.
μ체 νΈμ€ν λΉμ© μμΈ
- μΈνλΌ λΉμ©: μ ν리μΌμ΄μ μ νΈμ€ν νλ λ° μ¬μ©νλ μλ², μ€ν λ¦¬μ§ λ° λ€νΈμνΉ λ¦¬μμ€μ λν λΉμ©μ μ§λΆν΄μΌ ν©λλ€.
- λμν λΉμ©: μ ν리μΌμ΄μ κ³Ό μ¬μ©μ κ°μ μ μ‘λλ λ°μ΄ν° μμ λν λΉμ©μ μ§λΆν΄μΌ ν©λλ€.
- μ μ§ κ΄λ¦¬ λΉμ©: μΈνλΌλ₯Ό μ μ§νκ³ λͺ¨λν°λ§νλ λΉμ©μ κ³ λ €ν΄μΌ ν©λλ€.
- μΈκ±΄λΉ: μΈνλΌλ₯Ό κ΄λ¦¬νκ³ μ μ§νκΈ° μν΄ μμ§λμ΄λ₯Ό κ³ μ©ν΄μΌ ν μλ μμ΅λλ€.
μμ΅ λΆκΈ°μ
Vercelκ³Ό μ체 νΈμ€ν κ°μ μμ΅ λΆκΈ°μ μ νΉμ μ ν리μΌμ΄μ λ° λ¦¬μμ€ μꡬ μ¬νμ λ°λΌ λ€λ¦ λλ€. νΈλν½μ΄ μ μ μ ν리μΌμ΄μ μ κ²½μ°, μ¬μ© νΈμμ±κ³Ό κ΄λ¦¬ν μλΉμ€ λλΆμ Vercelμ΄ μ’ μ’ λ λΉμ© ν¨μ¨μ μΈ μ΅μ μ λλ€. κ·Έλ¬λ νΈλν½μ΄ λ§μ μ ν리μΌμ΄μ μ κ²½μ°, μΈνλΌμ 리μμ€ νμ©μ μ΅μ νν μ μμΌλ―λ‘ μ체 νΈμ€ν μ΄ λ λΉμ© ν¨μ¨μ μΌ μ μμ΅λλ€. μ νν μμ΅ λΆκΈ°μ μ κ²°μ νλ €λ©΄ μ ν리μΌμ΄μ μ 리μμ€ μꡬ μ¬νμ μΆμ νκ³ λ μ΅μ μ λΉμ©μ λΉκ΅νλ κ²μ΄ νμμ μ λλ€.
μ λ½μ κΈ°λ°μ λκ³ μ μΈκ³μ μ¬μ©μκ° μλ κ°μμ μ μ μκ±°λ νλ«νΌμ μκ°ν΄ 보μμμ€. μ²μμλ Vercelμ μ¬μ©νλ κ²μ΄ λ μ λ ΄ν μ μμ§λ§, νλ«νΌμ΄ μ±μ₯νκ³ μ μΈκ³μ μΌλ‘ νΈλν½μ΄ μ¦κ°ν¨μ λ°λΌ λ°μ΄ν° μ μ‘ λ° ν¨μ μ€νκ³Ό κ΄λ ¨λ λΉμ©μ΄ μ λ½, μμμ, λΆλ―Έμ μ λ΅μ μΌλ‘ μμΉν μλ²κ° μλ ν΄λΌμ°λ μ 곡μ 체μμ μ체 νΈμ€ν νλ λΉμ©μ μ΄κ³Όν μ μμ΅λλ€. ν΅μ¬μ μμ μ¬μ©λμ κΈ°λ°μΌλ‘ μμΈν λΉμ© λΆμμ μννλ κ²μ λλ€.
μ±λ₯ κ³ λ € μ¬ν
Vercelκ³Ό μ체 νΈμ€ν λͺ¨λ λ°μ΄λ μ±λ₯μ μ 곡ν μ μμ§λ§, λ€μ μμλ₯Ό κ³ λ €νλ κ²μ΄ μ€μν©λλ€:
Vercel μ±λ₯
- κΈλ‘λ² CDN: Vercelμ κΈλ‘λ² CDNμ μ μΈκ³ μ¬μ©μμκ² μ ν리μΌμ΄μ μ΄ λΉ λ₯΄κ² μ λ¬λλλ‘ λ³΄μ₯ν©λλ€.
- μλ²λ¦¬μ€ ν¨μ: μλ²λ¦¬μ€ ν¨μλ μ½λ μ€ννΈλ‘ μΈν΄ μ§μ° μκ°μ μ λ°ν μ μμ΅λλ€.
- μ£μ§ μ»΄ν¨ν : Vercelμ μ¬μ©νλ©΄ μ½λλ₯Ό μ£μ§μ λ°°ν¬νμ¬ μ ν리μΌμ΄μ μ μ¬μ©μμ λ κ°κΉκ² λ§λ€μ΄ μ§μ° μκ°μ μ€μΌ μ μμ΅λλ€.
μ체 νΈμ€ν μ±λ₯
- μλ² μμΉ: μλ²μ μμΉλ μ±λ₯μ ν° μν₯μ λ―ΈμΉ μ μμ΅λλ€. μ¬μ©μμ κ°κΉμ΄ μλ² μμΉλ₯Ό μ ννμμμ€.
- μΈνλΌ μ΅μ ν: μΊμ± λ° λ‘λ λ°Έλ°μ±κ³Ό κ°μ μΈνλΌ μ΅μ νλ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€.
- μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN): CDNμ ꡬννλ©΄ μ ν리μΌμ΄μ μ μ μ μμ°μ μΊμ±νκ³ μ¬μ©μμ κ°κΉμ΄ μλ²μμ μ λ¬νμ¬ μ±λ₯μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€. Cloudflare, Akamai, AWS CloudFrontμ κ°μ μλΉμ€κ° μΈκΈ° μλ μ νμ λλ€.
κΈλ‘λ² μ¬μ©μλ₯Ό λμμΌλ‘ νλ μ ν리μΌμ΄μ μ κ²½μ°, λΉ λ₯΄κ³ μμ μ μΈ μ±λ₯μ μ 곡νκΈ° μν΄ CDNμ νμμ μ λλ€. Vercelμ λ΄μ₯ CDNμ μ ννλ , μ체 νΈμ€ν μΌλ‘ μ§μ ꡬννλ , CDNμ μ¬μ©μ κ²½νμ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
보μ κ³ λ € μ¬ν
보μμ λͺ¨λ μΉ μ ν리μΌμ΄μ μμ μ€μν κ³ λ € μ¬νμ λλ€. λ€μμ Vercelκ³Ό μ체 νΈμ€ν μ λν λͺ κ°μ§ 보μ κ³ λ € μ¬νμ λλ€:
Vercel 보μ
- κ΄λ¦¬ν 보μ: Vercelμ DDoS λ³΄νΈ λ° SSL μΈμ¦μμ κ°μ 보μ κΈ°λ₯μ ν¬ν¨νλ κ΄λ¦¬ν νκ²½μ μ 곡ν©λλ€.
- μ νλ μ μ΄: κΈ°λ³Έ 보μ μΈνλΌμ λν μ μ΄κ° μ νλ©λλ€.
- μ κΈ°μ μΈ λ³΄μ κ°μ¬: Vercelμ΄ λ³΄μ λͺ¨λ² μ¬λ‘λ₯Ό μ€μνκ³ μ κΈ°μ μΈ λ³΄μ κ°μ¬λ₯Ό λ°λμ§ νμΈνμμμ€.
μ체 νΈμ€ν 보μ
- μλ²½ν μ μ΄: 보μ μΈνλΌμ λν μλ²½ν μ μ΄κΆμ κ°μ§λλ€.
- μ± μ: 보μ μ‘°μΉλ₯Ό ꡬννκ³ μ μ§ κ΄λ¦¬ν μ± μμ μ¬μ©μμκ² μμ΅λλ€.
- 보μ λͺ¨λ² μ¬λ‘: κ°λ ₯ν μνΈ μ¬μ©, λ°©νλ²½ ꡬν, μννΈμ¨μ΄ μ΅μ μν μ μ§μ κ°μ 보μ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄μμμ€.
- μ κΈ°μ μΈ λ³΄μ κ°μ¬: μ κΈ°μ μΈ λ³΄μ κ°μ¬λ₯Ό μννμ¬ μ·¨μ½μ μ μλ³νκ³ ν΄κ²°νμμμ€.
Vercelμ μ ννλ μ체 νΈμ€ν μ μ ννλ , 보μ λͺ¨λ² μ¬λ‘λ₯Ό ꡬννκ³ μ΅μ 보μ μνμ λν μ 보λ₯Ό μ΅μ μνλ‘ μ μ§νλ κ²μ΄ μ€μν©λλ€.
νμ₯μ± κ³ λ € μ¬ν
νμ₯μ±μ μ¦κ°νλ νΈλν½κ³Ό μμλ₯Ό μ²λ¦¬νλ μ ν리μΌμ΄μ μ λ₯λ ₯μ λλ€. λ€μμ Vercelκ³Ό μ체 νΈμ€ν μ λν λͺ κ°μ§ νμ₯μ± κ³ λ € μ¬νμ λλ€:
Vercel νμ₯μ±
- μλ νμ₯: Vercelμ νΈλν½ μμμ λ°λΌ μ ν리μΌμ΄μ μ μλμΌλ‘ νμ₯ν©λλ€.
- μλ²λ¦¬μ€ μν€ν μ²: Vercelμ μλ²λ¦¬μ€ μν€ν μ²λ₯Ό μ¬μ©νλ©΄ μλ² κ΄λ¦¬ μμ΄ μ ν리μΌμ΄μ μ νμ₯ν μ μμ΅λλ€.
- μλ μ ν: λ¨μ©μΌλ‘λΆν° μ ν리μΌμ΄μ μ 보νΈνκΈ° μν΄ μλ μ νμ ꡬννμμμ€.
μ체 νΈμ€ν νμ₯μ±
- μλ νμ₯: νΈλν½μ΄ μ¦κ°ν¨μ λ°λΌ μλμΌλ‘ μΆκ° 리μμ€λ₯Ό νλ‘λΉμ λνκ³ κ΅¬μ±ν΄μΌ ν©λλ€.
- λ‘λ λ°Έλ°μ±: λ‘λ λ°Έλ°μ±μ μ¬μ©νμ¬ μ¬λ¬ μλ²μ νΈλν½μ λΆμ°νμμμ€.
- μ€ν μ€μΌμΌλ§ κ·Έλ£Ή: ν΄λΌμ°λ μ 곡μ 체λ νΈλν½ μμμ λ°λΌ 리μμ€λ₯Ό μλμΌλ‘ νλ‘λΉμ λνκ³ ν΄μ ν μ μλ μ€ν μ€μΌμΌλ§ κ·Έλ£Ήμ μ 곡ν©λλ€.
- λ°μ΄ν°λ² μ΄μ€ νμ₯: μ¦κ°νλ λ°μ΄ν° μκ³Ό νΈλν½μ μ²λ¦¬νκΈ° μν΄ λ°μ΄ν°λ² μ΄μ€λ₯Ό νμ₯νμμμ€.
μμΈ‘ν μ μλ νΈλν½ ν¨ν΄μ κ°μ§ μ ν리μΌμ΄μ μ κ²½μ°, Vercelμ μλ νμ₯μ μλΉν μ΄μ μ΄ λ μ μμ΅λλ€. κ·Έλ¬λ μμΈ‘ κ°λ₯ν νΈλν½ ν¨ν΄μ κ°μ§ μ ν리μΌμ΄μ μ κ²½μ°, 리μμ€λ₯Ό μ ννκ² μμΈ‘νκ³ νλ‘λΉμ λν μ μλ€λ©΄ μ체 νΈμ€ν μ΄ λ λΉμ© ν¨μ¨μ μΌ μ μμ΅λλ€.
CI/CD ν΅ν©
μ§μμ ν΅ν© λ° μ§μμ μ λ¬(CI/CD)μ λΉλ, ν μ€νΈ λ° λ°°ν¬ νλ‘μΈμ€λ₯Ό μλννλ κ΄νμ λλ€. Vercelκ³Ό μ체 νΈμ€ν λͺ¨λ CI/CD νμ΄νλΌμΈκ³Ό ν΅ν©λ μ μμ΅λλ€.
Vercel CI/CD
- μλ λ°°ν¬: Vercelμ Git 리ν¬μ§ν 리μ λ³κ²½ μ¬νμ νΈμν λλ§λ€ μ ν리μΌμ΄μ μ μλμΌλ‘ λΉλνκ³ λ°°ν¬ν©λλ€.
- Git ν΅ν©: Vercelμ GitHub, GitLab, Bitbucketκ³Ό κ°μ Git μ 곡μ 체μ μννκ² ν΅ν©λ©λλ€.
- 미리보기 λ°°ν¬: Vercelμ 미리보기 λ°°ν¬ κΈ°λ₯μ μ¬μ©νλ©΄ λ³κ²½ μ¬νμ λ©μΈ λΈλμΉμ λ³ν©νκΈ° μ μ νλ‘λμ κ³Ό μ μ¬ν νκ²½μμ ν μ€νΈν μ μμ΅λλ€.
μ체 νΈμ€ν CI/CD
- μ¬μ©μ μ μ νμ΄νλΌμΈ: Jenkins, GitLab CI λλ CircleCIμ κ°μ λꡬλ₯Ό μ¬μ©νμ¬ μ¬μ©μ μ μ CI/CD νμ΄νλΌμΈμ λ§λ€ μ μμ΅λλ€.
- μλν: λΉλ, ν μ€νΈ λ° λ°°ν¬ νλ‘μΈμ€λ₯Ό μλννμμμ€.
- λ²μ κ΄λ¦¬: λ²μ κ΄λ¦¬λ₯Ό μ¬μ©νμ¬ μ½λλ₯Ό κ΄λ¦¬νκ³ λ³κ²½ μ¬νμ μΆμ νμμμ€.
Vercelμ μλ λ°°ν¬ κΈ°λ₯ λλΆμ CI/CD νμ΄νλΌμΈμ λ§€μ° μ½κ² μ€μ ν μ μμ΅λλ€. κ·Έλ¬λ μ체 νΈμ€ν μ CI/CD νλ‘μΈμ€μ λν λ ν° μ μ°μ±κ³Ό μ μ΄κΆμ μ 곡ν©λλ€.
μ¬λ°λ₯Έ μ΅μ μ ννκΈ°
Next.js μ ν리μΌμ΄μ μ κ°μ₯ μ ν©ν λ°°ν¬ μ΅μ μ νΉμ μꡬ μ¬νκ³Ό μ°μ μμμ λ°λΌ λ€λ¦ λλ€. λ€μμ μ£Όμ κ³ λ € μ¬νμ μμ½ν κ²μ λλ€:
- μ¬μ© νΈμμ±: μ¬μ© νΈμμ± μΈ‘λ©΄μμλ Vercelμ΄ νμ€ν μΉμμ λλ€.
- μ μ΄: μ체 νΈμ€ν μ λ°°ν¬ νκ²½μ λν λ ν° μ μ΄κΆμ μ 곡ν©λλ€.
- λΉμ©: νΈλν½μ΄ μ μ μ ν리μΌμ΄μ μ κ²½μ° Vercelμ΄ λ λΉμ© ν¨μ¨μ μΌ μ μμΌλ©°, νΈλν½μ΄ λ§μ μ ν리μΌμ΄μ μ κ²½μ° μ체 νΈμ€ν μ΄ λ λΉμ© ν¨μ¨μ μΌ μ μμ΅λλ€.
- μ±λ₯: Vercelκ³Ό μ체 νΈμ€ν λͺ¨λ λ°μ΄λ μ±λ₯μ μ 곡ν μ μμ§λ§, μλ² μμΉ λ° CDNκ³Ό κ°μ μμλ₯Ό κ³ λ €νλ κ²μ΄ μ€μν©λλ€.
- 보μ: 보μμ Vercelκ³Ό μ체 νΈμ€ν λͺ¨λμμ μ€μν κ³ λ € μ¬νμ λλ€.
- νμ₯μ±: μμΈ‘ν μ μλ νΈλν½ ν¨ν΄μ κ°μ§ μ ν리μΌμ΄μ μ κ²½μ° Vercelμ μλ νμ₯μ΄ μλΉν μ΄μ μ΄ λ μ μμ΅λλ€.
μ¬μ© μ¬λ‘
λ€μμ Vercelκ³Ό μ체 νΈμ€ν μ μΌλ°μ μΈ μ¬μ© μ¬λ‘μ λλ€:
Vercel μ¬μ© μ¬λ‘
- μ€μ κ·λͺ¨ μΉμ¬μ΄νΈ: Vercelμ μ€κ° μ λμ νΈλν½μ κ°μ§ μ€μ κ·λͺ¨ μΉμ¬μ΄νΈμ νλ₯ν μ νμ λλ€.
- λλ© νμ΄μ§: Vercelμ μ¬μ© νΈμμ±κ³Ό μλ λ°°ν¬ κΈ°λ₯μ λλ© νμ΄μ§μ μ΄μμ μ λλ€.
- νλ‘ν νμ΄ν: Vercelμ 미리보기 λ°°ν¬ κΈ°λ₯μ μλ‘μ΄ κΈ°λ₯μ νλ‘ν νμ΄ννκ³ ν μ€νΈνλ λ° λ§€μ° μ μ©ν©λλ€.
- JAMstack μ ν리μΌμ΄μ : Vercelμ μ μ μ¬μ΄νΈ μμ±κΈ°μ μλ²λ¦¬μ€ ν¨μλ‘ κ΅¬μΆλ JAMstack μ ν리μΌμ΄μ μ μμ°μ€λ½κ² μ΄μΈλ¦½λλ€.
- μλμ λ¨μμ±μ μ°μ μνλ ν: νμ΄ μ μν λ°°ν¬μ μ΅μνμ μΈνλΌ κ΄λ¦¬λ₯Ό μ€μνκ² μκ°νλ€λ©΄ Vercelμ κ°λ ₯ν κ²½μμμ λλ€.
μ체 νΈμ€ν μ¬μ© μ¬λ‘
- νΈλν½μ΄ λ§μ μ ν리μΌμ΄μ : μ체 νΈμ€ν μ μΈνλΌ λ° λ¦¬μμ€ νμ©μ μ΅μ νν μ μλ νΈλν½μ΄ λ§μ μ ν리μΌμ΄μ μ λ λΉμ© ν¨μ¨μ μΌ μ μμ΅λλ€.
- νΉμ μꡬ μ¬νμ΄ μλ μ ν리μΌμ΄μ : μ체 νΈμ€ν μ λ°°ν¬ νκ²½μ λν λ ν° μ μ΄κΆμ μ 곡νλ―λ‘ νΉμ 보μ, κ·μ μ€μ λλ μ±λ₯ μꡬ μ¬νμ΄ μλ μ ν리μΌμ΄μ μ νμμ μ λλ€.
- DevOps μ λ¬Έ μ§μμ κ°μΆ μ‘°μ§: μ‘°μ§μ κ°λ ₯ν DevOps νμ΄ μλ€λ©΄ μ체 νΈμ€ν μ μ€ν κ°λ₯ν μ΅μ μ΄ λ μ μμ΅λλ€.
- μ¬μ©μ μ μ μΈνλΌκ° νμν μ ν리μΌμ΄μ : μ ν리μΌμ΄μ μ νΉμν νλμ¨μ΄ λλ μννΈμ¨μ΄ ꡬμ±μ΄ νμν κ²½μ° μ체 νΈμ€ν μ΄ νμν μ μμ΅λλ€.
- μμ°μ λ―Όκ°ν νλ‘μ νΈ: νΈμ€ν λΉμ© μ΅μνκ° μ£Όμ κ΄μ¬μ¬μ΄κ³ νμ΄ μΈνλΌλ₯Ό ν¨κ³Όμ μΌλ‘ κ΄λ¦¬ν κΈ°μ μ 보μ νκ³ μλ€λ©΄, μ체 νΈμ€ν μ μκ°μ΄ μ§λ¨μ λ°λΌ μλΉν λΉμ© μ κ°μ μ 곡ν μ μμ΅λλ€.
κ²°λ‘
Next.js μ ν리μΌμ΄μ μ μ ν©ν λ°°ν¬ μ΅μ μ μ ννλ κ²μ μ±λ₯, νμ₯μ±, λΉμ© λ° λ³΄μμ ν° μν₯μ λ―ΈμΉ μ μλ μ€μν κ²°μ μ λλ€. Vercelμ κ°μνλκ³ μ¬μ©μ μΉνμ μΈ κ²½νμ μ 곡νμ¬ λ§μ νλ‘μ νΈμ νλ₯ν μ νμ΄ λ©λλ€. κ·Έλ¬λ μ체 νΈμ€ν μ λ ν° μ μ΄κΆκ³Ό μ μ°μ±μ μ 곡νλ©°, μ΄λ νΈλν½μ΄ λ§μ μ ν리μΌμ΄μ μ΄λ νΉμ μꡬ μ¬νμ΄ μλ μ ν리μΌμ΄μ μ νμμ μΌ μ μμ΅λλ€.
κΆκ·Ήμ μΌλ‘ μ΅μμ μ΅μ μ κ°λ³μ μΈ μꡬ μ¬νκ³Ό μ°μ μμμ λ°λΌ λ€λ¦ λλ€. μ΄ κ°μ΄λμμ λ Όμλ μμλ₯Ό μ μ€νκ² κ³ λ €νκ³ κ²°μ μ λ΄λ¦¬κΈ° μ μ κ° μ κ·Ό λ°©μμ μ₯λ¨μ μ λ°μ Έλ³΄μμμ€. Vercelκ³Ό μ체 νΈμ€ν μ λ―Έλ¬ν μ°¨μ΄λ₯Ό μ΄ν΄ν¨μΌλ‘μ¨ νλ‘μ νΈμ λͺ©νμ 리μμ€μ κ°μ₯ μ λ§λ λ°°ν¬ μ΅μ μ μ νν μ μμ΅λλ€.
μ΄λ€ λ°°ν¬ κ²½λ‘λ₯Ό μ ννλ , μ₯κΈ°μ μΌλ‘ Next.js μ ν리μΌμ΄μ μ μ±κ³΅μ 보μ₯νκΈ° μν΄ λ³΄μ, μ±λ₯ μ΅μ ν λ° μ§μμ μΈ λͺ¨λν°λ§μ μ°μ μν΄μΌ ν©λλ€. λ°°ν¬ μ λ΅μ λν μ κΈ°μ μΈ κ°μ¬μ μ‘°μ μ λ³ννλ νΈλν½ ν¨ν΄κ³Ό κΈ°μ λ°μ μ μ μνλ λ° λμμ΄ λ μ μμ΅λλ€.